import React, { Component } from 'react'
import 'antd/dist/antd.css';
// import { Input, Button, List } from 'antd';
import TodoListUI from './todo-list-ui'

import axios from 'axios'

import store from './store/index'
import { getInputChangeAction, getAddItemAction, getDeleteItemAction, getInitList } from './store/actionCreator'

export default class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState()
    // console.log(store.getState())
    this.handleChange = this.handleChange.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    this.handleAdd = this.handleAdd.bind(this)
    this.handleDeleteItem = this.handleDeleteItem.bind(this)

    store.subscribe(this.handleStoreChange)
  }
  render() {
    return (
      <TodoListUI 
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleChange={this.handleChange}
        handleAdd={this.handleAdd}
        handleDeleteItem={this.handleDeleteItem}
      />
    )
  }

  componentDidMount() {
    const action = getInitList()
    store.dispatch(action)
    // axios.get('http://localhost.charlesproxy.com:3000/api/todolist').then(res => {
    //   console.log(res)
    //   const data = res.data
    //   const action = getInitAction(data)
    //   store.dispatch(action)
    // })
  }
  handleChange(e) {
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
  }

  handleAdd() {
    const action = getAddItemAction()
    store.dispatch(action)
  }

  handleDeleteItem(index) {
    const action = getDeleteItemAction(index)
    store.dispatch(action)
  }

  handleStoreChange() {
    // console.log(111)
    this.setState(store.getState())
  }

  
}
